/**
 * ============================================================================
 *  Custom Stylesheet for WannWoHin
 *  ----------------------------------------------------------------------------
 *  Project:     WannWoHin
 *  Author:      Ingo Ruddat
 *  Version:     1.0.0
 *  Date:        [Aktuelles Datum]
 *  File:        custom-new.css
 * ============================================================================
 *
 *  Description:
 *  ----------------------------------------------------------------------------
 *  Dieses Stylesheet enthält alle benutzerdefinierten Styles für das Projekt
 *  "WannWoHin". Hier werden neue Designanpassungen und Optimierungen ergänzt,
 *  die über das Standard-Stylesheet hinausgehen.
 *
 *  Struktur:
 *  ----------------------------------------------------------------------------
 *  1. Allgemeine Layout-Einstellungen
 *  2. Hintergrund & Overlays
 *  3. Responsive Anpassungen
 *  4. Effekte & Animationen
 *  5. Komponenten & UI-Elemente
 *
 *  Hinweise:
 *  ----------------------------------------------------------------------------
 *  - Alle neuen Styles sollten hier hinzugefügt werden, um eine zentrale
 *    Verwaltung sicherzustellen.
 *  - Die Datei sollte regelmäßig dokumentiert und versioniert werden.
 *  - Bestehende CSS-Regeln aus anderen Stylesheets sollten nicht überschrieben,
 *    sondern gezielt erweitert oder angepasst werden.
 * ============================================================================
 */

/* ============================================================================
   1. Allgemeine Layout-Einstellungen
   ============================================================================ */

/* Beispiel: Einheitliche Schriften und Abstände */
body {
    font-family: "Arial", sans-serif;
    line-height: 1.6;
}

/* General gotop Button Styling */
.go-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 4rem;
    height: 4rem;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #4caf50, #81c784);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 2000;
}

.go-top:hover {
    background: linear-gradient(135deg, #388e3c, #66bb6a);
    transform: scale(1.1);
}

.go-top.visible {
    opacity: 1;
    visibility: visible;
}

/* Progress Ring */
.progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    z-index: 0;
    /* Below the button content */
}

.progress-ring__background,
.progress-ring__progress {
    fill: none;
    stroke-width: 5;
    r: 45;
    /* Radius */
    cx: 50;
    /* Center x */
    cy: 50;
    /* Center y */
}

.progress-ring__background {
    stroke: rgba(255, 255, 255, 0.2);
}

.progress-ring__progress {
    stroke: white;
    stroke-dasharray: 283;
    /* Circumference: 2 * π * r */
    stroke-dashoffset: 283;
    /* Start fully hidden */
    transition: stroke-dashoffset 0.2s ease;
}

@media (max-width: 768px) {
    #goTopButton {
        display: none !important;
    }
}
/*----------------------------------------------*/
/* Loading Screen */
#loading-screen {
    padding: 20px;
    box-sizing: border-box;
  }

  .loading-icon {
    width: 80px;
    height: 80px;
    fill: #ffffff;
  }

  /* Lade-Text */
  .loading-text {
    color: #fff;
    font-size: 1.5rem;
    margin-top: 20px;
    text-align: center;
  }

  /* Fortschrittsbalken */
  .loading-bar {
    width: 80%;
    max-width: 600px;
    height: 10px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    overflow: hidden;
    margin-top: 20px;
  }

  .progress {
    width: 0%;
    height: 100%;
    background: #fff;
    transition: width 0.3s ease;
  }

  /* ✅ Responsive Anpassungen */
  @media (max-width: 768px) {
    .loading-icon {
      width: 60px;
      height: 60px;
    }

    .loading-text {
      font-size: 1.2rem;
    }

    .loading-bar {
      width: 90%;
    }
  }

  @media (max-width: 480px) {
    .loading-icon {
      width: 50px;
      height: 50px;
    }

    .loading-text {
      font-size: 1rem;
    }

    .loading-bar {
      width: 100%;
    }
  }







/* ============================================================================
   2. Hintergrund & Overlays
   ============================================================================ */

/* Beispiel: Hintergrund für Sektionen */
.inner-shape {
    background-image: url("../img/slider-pattern.png");
    background-size: cover;
    background-repeat: no-repeat;
    content: "";
    height: 90px;
    width: 100%;
    margin-top: -80px;
    position: relative;
}

/* ============================================================================
   3. Responsive Anpassungen
   ============================================================================ */

@media (max-width: 768px) {
    .inner-shape {
        height: 100px;
        margin-top: -50px;
    }
}

/* ============================================================================
   4. Effekte & Animationen
   ============================================================================ */

/* Beispiel: Hover-Effekt für Buttons */
.btn-custom:hover {
    transform: scale(1.05);
    transition: all 0.3s ease-in-out;
}

/* ============================================================================
   5. Komponenten & UI-Elemente
   ============================================================================ */

/* Beispiel: Standardisierte Karten */
.card-custom {
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    background: white;
}